<template>  
  <view class="container">   
    <view class="icon-container">  
        <uni-icons type="search" class="left-icon"></uni-icons>  
        <uni-icons type="mic-filled" class="right-icon"></uni-icons>  
    </view>  
    <uni-list style="margin-top: 40rpx;" >
      <!-- 使用v-for指令遍历friends数组 -->  
      <uni-list-chat  
        v-for="(msg, index) in messages"  
        :key="index"  
        :avatar-circle="true"  
        :avatar="msg.avatarUrl"  
        :title="msg.nickName"
		:time= "msg.timestamp" 
        :note="msg.content"
		clickable
		@click="gotoMessage(msg.avatarUrl,msg.nickName)"
      ></uni-list-chat>  
    </uni-list>    
  </view>  
</template>  
  
<script>  
export default {
	data() {  
		return {  
			messages: [  
				{ 
					avatarUrl: 'https://tupian.qqw21.com/article/UploadPic/2020-2/202022217551337361.jpg', 
					nickName: 'User 1', 
					content: 'Hello, world!', 
					timestamp: '2023-06-20 10:00' ,
				},  
				{ 
					avatarUrl: 'https://tupian.qqw21.com/article/UploadPic/2021-1/202111921572763735.jpg', 
					nickName: 'User 2', 
					content: 'How are you?', 
					timestamp: '2023-06-20 09:30' 
				},  
				{ 
					avatarUrl: 'https://tupian.qqw21.com/article/UploadPic/2021-1/202111921572763735.jpg', 
					nickName: 'User 3', 
					content: 'Good morning!', 
					timestamp: '2023-06-20 08:45' ,
				}  
			]  
		};  
	},
	onLoad() {
		// 设置页面标题  
		uni.setNavigationBarTitle({  
			title: '消息列表'  
		});
		// 获取消息列表
		uni.request({
			url: '',// 接口地址(附带用户名)
			method: 'GET',
			success: (res) => {
					
				if (res.data.success){
					this.messages = res.data.data // 这里应该返回用户名，头像，最近发送的一条消息及时间
					uni.showToast({
						title:'获取消息列表成功',
						icon:'success'
					})
				}
			},
			fail: () => {
				uni.showModal({
					title: '网络错误',
					content: '无法连接服务器，请检查网络连接！',
				});
			}
		})  
	},
	methods: {
		gotoMessage(avatar,nickname) {
			uni.navigateTo({
				url: '/pages/version1/friend_page'
			})
		}
	}
};  
</script>  
  
<style scoped>
.icon-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center; /* 如果需要垂直居中 */  
}  
  
.left-icon {  
  /* 这里可以添加针对左边图标的样式 */  
}  
  
.right-icon {  
  /* 这里可以添加针对右边图标的样式 */  
}  
.container {  
  display: flex;  
  flex-direction: column;  
  padding: 20px;  
}  
.title {  
  font-size: 24px;  
  font-weight: bold;  
  color: #333;  
  text-align: center;  
  margin-bottom: 10px;  
}  

.search-input {  
  width: 100%;  
  padding: 5px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  margin-bottom: 6%;
}  

.message-list {  
  margin-bottom: 20px;
}  

.message {  
  display: flex;  
  align-items: center;  
  border: 1px solid #ccc;  
  padding: 10px;  
  margin-bottom: 10px;  
}  

.avatar {  
  width: 40px;  
  height: 40px;  
  border-radius: 50%;  
  margin-right: 10px;  
}  

.username {  
  font-weight: bold;  
}  

.timestamp {  
  font-size: 14px;  
  color: #666;  
}  
</style>
